<template>
	<view class="card p-30 d-flex">
		<text class="card_title mb-30">可选模块</text>
		
		<uv-checkbox-group class="list" v-model="checkboxValue">
			<uv-checkbox size="26rpx" class="list_item mr-30 p-20">
				<template #default>
					<view class="info">
						<view class="info_msg pl-50 mb-30 d-flex">
							<text class="info_label mr-20">资产情况</text>
							
							<view class="info_money d-flex">
								<text class="new_money money relative pl-30 mb-10">16.8</text>
								<text class="old_money money relative pl-10 t-center">26.8</text>
							</view>
						</view>
						
						<view class="info_list d-flex">
							<text class="info_list_tag mr-10">收入信息</text>
							<text class="info_list_tag">车辆信息</text>
						</view>
					</view>
				</template>
			</uv-checkbox>
			
			<uv-checkbox size="26rpx" class="list_item p-20">
				<template #default>
					<view class="info">
						<view class="info_msg pl-50 mb-30 d-flex">
							<text class="info_label mr-20">企业信息</text>
							
							<view class="info_money d-flex">
								<text class="new_money money relative pl-30 mb-10">45.8</text>
								<text class="old_money money relative pl-10 t-center">88.8</text>
							</view>
						</view>
						
						<view class="info_list  d-flex">
							<text class="info_list_tag mb-20 mr-10">企业法人</text>
							<text class="info_list_tag mb-20">经营风险</text>
							<text class="info_list_tag mr-10">企业高管</text>
							<text class="info_list_tag">关联企业</text>
						</view>
					</view>
				</template>
			</uv-checkbox>
		</uv-checkbox-group>
	</view>
</template>

<script setup>
		
</script>

<style lang="scss" scoped>
		::v-deep {
			.uv-checkbox {
				position: relative;
				width: calc(50% - 15rpx);
				border: 1rpx solid #FF0067;
				border-radius: 10rpx;;
			}
			
			.uv-checkbox__icon-wrap {
				position: absolute;
				top: 45rpx;
			}
			
			.uv-checkbox__label-wrap {
				padding-left: 0;
				margin-bottom: auto;
			}
		}
		
		.info  {
			&_msg {
				flex-direction: row;
				align-items: center;
			}
			&_label {
				font: {
					size: 23rpx
				}
			}
			&_money {
				flex-direction: column;
			}
			
			.money {
				font: {
					size: 25rpx
				}
				&.new_money {
					color: #FF0067;
					&:before {
						content: '￥';
						position: absolute;
						left: 0;
						top: 0;
					}
				}
				&.old_money {
					left: 10rpx;
					color: #C2C9CD;
					&:before {
						content: '￥';
						position: absolute;
						left: 0;
						top: 0;
					}
					&::after {
						content: '';
						position: absolute;
						top: 12rpx;
						left: 5rpx;
						width: 100%;
						height: 2rpx;
						background-color: #C2C9CD;
					}
				}
			}
		
			&_list {
				flex-wrap: wrap;
				
				&_tag {
					width: calc(50% - 5rpx);
					background-color: #F8DEEE;
					color: #FF0067;
					font: {
						size: 24rpx;
					}
					border: 1px solid #FF0067;
					padding: 10rpx;
					border-radius: 10rpx;
				}
			}
		}
</style>
